<template>
  <div>
    <div v-for="(item, index) in lists.protectCategoryVoList" class="s-thing">
      <template
        v-if="
          showArr.includes(item.protectCategoryName) ||
          showArr.includes(item.behaviorName) ||
          showArr.length == 0
        "
      >
        <template v-if="item.protectSubCategoryVoList">
          <div class="things-list">
            <!-- 标题部分 -->
            <div class="title">
              <!-- 主标题部分 -->
              <span>{{ item.protectCategoryName }}</span>

              <div>
                <!-- 小便签们 -->

                <span v-if="item.levelEspMajor != '0/0'">
                  <i class="danger">特别重大</i>
                  <span>({{ item.levelEspMajor }})</span>
                </span>
                <span v-if="item.levelMajor != '0/0'">
                  <i class="serious">重大</i>
                  <span>({{ item.levelMajor }})</span>
                </span>
                <span v-if="item.levelMore != '0/0'">
                  <i class="risk">较大</i>
                  <span>({{ item.levelMore }})</span>
                </span>
                <span v-if="item.levelCommonly != '0/0'">
                  <i class="normal">一般</i>
                  <span>({{ item.levelCommonly }})</span>
                </span>
              </div>
            </div>
            <!-- 列表区域 -->
            <el-collapse class="list-arr" v-model="graArr">
              <!-- 单个列表 -->

              <el-collapse-item
                class="single-list"
                :title="i.protectSubCategoryName"
                :name="i.protectSubCategoryId + idx"
                v-for="(i, idx) in item.protectSubCategoryVoList"
              >
                <!-- 列表内容 -->
                <div class="arr-content">
                  <el-row :gutter="20">
                    <!-- 事项 -->
                    <el-col
                      class="sinSpan"
                      :span="8"
                      v-for="(thing, iindex) in i.eventVoList"
                    >
                      <el-popover placement="top" trigger="hover">
                        <div>
                          <p>
                            <span class="font-grey">事件名称：</span
                            >{{ thing.name }}
                          </p>
                          <p>
                            <span class="font-grey">事件级别：</span>
                            <span
                              :class="
                                thing.eventLevel == '特别重大'
                                  ? 'danger'
                                  : thing.eventLevel == '重大'
                                  ? 'serious'
                                  : thing.eventLevel == '较大'
                                  ? 'risk'
                                  : 'normal'
                              "
                              >{{ thing.eventLevel }}</span
                            >
                          </p>
                          <p>
                            <span class="font-grey">事件总数：</span
                            >{{ thing.total }}
                          </p>
                          <p>
                            <span class="font-grey">未处置数量：</span
                            >{{ thing.disposed }}
                          </p>
                          <p>
                            <span class="font-grey">一票否决项：</span
                            >{{ thing.isVote == 1 ? "是" : "否" }}
                          </p>
                        </div>
                        <div
                          slot="reference"
                          class="conSpan"
                          @click="openDia(thing)"
                        >
                          <i
                            class="box"
                            :class="
                              thing.eventLevel == '特别重大'
                                ? 'danger'
                                : thing.eventLevel == '重大'
                                ? 'serious'
                                : thing.eventLevel == '较大'
                                ? 'risk'
                                : 'normal'
                            "
                          >
                            {{ thing.disposed + "/" + thing.total }}</i
                          >
                          <span> {{ thing.name }}</span>
                          <i
                            class="el-icon-warning"
                            style="color: #ff3535; margin-left: 10px"
                            v-if="thing.isVote == 1"
                          ></i>
                        </div>
                      </el-popover>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </template>
        <template v-else>
          <div class="things-list">
            <el-collapse class="list-arr" v-model="collArr">
              <!-- 单个列表 -->

              <el-collapse-item
                class="single-list"
                :title="item.behaviorName"
                :name="item.behaviorId"
              >
                <div class="small-notes">
                  <!-- 小便签们 -->

                  <span v-if="item.levelEspMajor != '0/0'">
                    <i class="danger">特别重大</i>
                    <span>({{ item.levelEspMajor }})</span>
                  </span>
                  <span v-if="item.levelMajor != '0/0'">
                    <i class="serious">重大</i>
                    <span>({{ item.levelMajor }})</span>
                  </span>
                  <span v-if="item.levelMore != '0/0'">
                    <i class="risk">较大</i>
                    <span>{{ item.levelMore }}</span>
                  </span>
                  <span v-if="item.levelCommonly != '0/0'">
                    <i class="normal">一般</i>
                    <span>({{ item.levelCommonly }})</span>
                  </span>
                </div>
                <!-- 列表内容 -->
                <div class="arr-content">
                  <el-row :gutter="20">
                    <!-- 事项 -->
                    <el-col
                      class="sinSpan"
                      v-for="(thing, iindex) in item.eventVoList"
                    >
                      <el-popover placement="top" trigger="hover">
                        <div>
                          <p>
                            <span class="font-grey">事件名称：</span
                            >{{ thing.name }}
                          </p>
                          <p>
                            <span class="font-grey">事件级别：</span>
                            <span
                              :class="
                                thing.eventLevel == '特别重大'
                                  ? 'danger'
                                  : thing.eventLevel == '重大'
                                  ? 'serious'
                                  : thing.eventLevel == '较大'
                                  ? 'risk'
                                  : 'normal'
                              "
                              >{{ thing.eventLevel }}</span
                            >
                          </p>
                          <p>
                            <span class="font-grey">事件总数：</span
                            >{{ thing.total }}
                          </p>
                          <p>
                            <span class="font-grey">未处置数量：</span
                            >{{ thing.disposed }}
                          </p>
                          <p>
                            <span class="font-grey">一票否决项：</span
                            >{{ thing.isVote == 1 ? "是" : "否" }}
                          </p>
                        </div>
                        <div
                          slot="reference"
                          class="conSpan"
                          @click="openDia(thing)"
                        >
                          <i
                            class="box"
                            :class="
                              thing.eventLevel == '特别重大'
                                ? 'danger'
                                : thing.eventLevel == '重大'
                                ? 'serious'
                                : thing.eventLevel == '较大'
                                ? 'risk'
                                : 'normal'
                            "
                          >
                            {{ thing.disposed + "/" + thing.total }}</i
                          >
                          <span> {{ thing.name }}</span>
                          <i
                            class="el-icon-warning"
                            style="color: #ff3535; margin-left: 10px"
                            v-if="thing.isVote == 1"
                          ></i>
                        </div>
                      </el-popover>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </template>
      </template>

      <!-- 对话框部分 -->
    </div>
    <searchDialog
      ref="dialogRef"
      :searchFormObj="imgFormObj"
      :tableList="imgTableList"
      :tableData="tableData"
      :total="total"
      @getTableList="getTableList"
      @operateEvent="operateEvent"
      title="事件列表"
      :operateOpen="true"
    />
  </div>
</template>

<script>
import DictLabel from "./dictLabel.vue";
import Obj from "@/components/index/assetSituation/components/tableData/index";
import { cloneDeep } from "@/utils/loadash-es";
import { kpilList } from "@/api/assetSituation";
import SearchDialog from "./searchDialog.vue";
export default {
  props: {
    lists: {
      type: Object,
      default: () => {},
    },
    showArr: {
      type: Array,
      default: () => [],
    },
    levelArr: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 网络安全重点关注项对话框
      tableData: [],
      total: 0,
      imgTableList: cloneDeep(Obj.importantTableList),
      queryParams: {
        size: 10,
        current: 1,
        searchType: this.$store.state.searchType || "3",
      },
    };
  },
  computed: {
    graArr: {
      get() {
        if (!this.lists.protectCategoryVoList) return [];
        let arr = [];
        this.lists.protectCategoryVoList.forEach((item) => {
          item.protectSubCategoryVoList.forEach((i, idx) => {
            arr.push(i.protectSubCategoryId + idx);
          });
        });

        return arr;
      },
      set() {},
    },
    collArr: {
      get() {
        if (!this.lists.confidentialityTypeVoList) return [];
        let arr = [];
        this.lists.confidentialityTypeVoList.forEach((item) => {
          arr.push(item.behaviorId);
        });
        return arr;
      },
      set() {},
    },
    imgFormObj: {
      get() {
        return {
          fieldList: cloneDeep(Obj.importantFormObj.fieldList),
          searchData: {},
          btnHidden: true,
          //  是否有额外的参数
          isNeedResetExtraParam: false,
          listTypeInfo: {
            levelCodeList: this.$store.state.levelCodeList,
            categoryCodeList: this.$store.state.categoryCodeList,
            typeCodeList: this.$store.state.typeCodeList,
            protectCodeList: this.$store.state.protectCodeList,
            disposalStatusList: [
              {
                label: "未处置 ",
                value: 0,
              },
              {
                label: "已处置 ",
                value: 1,
              },
              {
                label: "处置中 ",
                value: 2,
              },
            ],
          },
        };
      },
      set() {},
    },
  },
  methods: {
    openDia(item) {
      this.refreshKeyData({ eventCode: item.metricsCode }).then((res) => {
        this.imgFormObj.searchData = {
          searchType: this.$store.state.searchType || "1",
          eventCode: item.metricsCode,
        };
        this.$refs.dialogRef.open = true;
      });
    },
    refreshKeyData(query) {
      return new Promise((resolve, reject) => {
        let newQuery = {
          ...this.queryParams,
          ...query,
          searchType: this.$store.state.searchType || "1",
        };
        kpilList(newQuery).then((res) => {
          this.total = res.total;
          this.tableData = res.list;
          resolve(this.total);
        });
      });
    },
    getTableList(val) {
      this.refreshKeyData(val);
    },
    // 重点关注操作
    operateEvent(data) {
      window.open(
        window.urlPrefix + "dispose/incidentHandle/detail?id=" + data.row.id
      );
    },
  },
  mounted() {
    // 打开所有页面
    // this.collArr = Array.from(Array(this.lists.event.length).keys());
  },
  components: { DictLabel, SearchDialog },
  watch: {},
};
</script>

<style lang="scss" scoped>
.s-thing {
  margin-bottom: 15px;
  &:last-of-type {
    margin-bottom: 0;
  }
}
.things-list {
  background: rgba(54, 94, 255, 0.1);
  border: 1px solid rgba(54, 94, 255, 0.4);
  padding: 1.25rem;
  border-radius: 4px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  //   标题部分
  .title {
    width: 100%;
    height: 2.1875rem;
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    & > span {
      font-size: 1rem;
    }
    & > div {
      & > span {
        margin-right: 1.25rem;
      }
      span {
        margin-left: 5px;
      }
    }
  }
}
.list-arr {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;

  .single-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    position: relative;
    .small-notes {
      position: absolute;
      top: 0;
      right: 0.625rem;
      line-height: 40px;
      color: #fff;
      & > span {
        font-size: 1rem;
        margin-right: 1.25rem;
      }
      span {
        margin-left: 5px;
      }
    }
    .arr-title {
      padding-left: 1.875rem;
      display: flex;
      align-items: center;
      height: 3.125rem;
      width: 45%;
      background-image: linear-gradient(
        270deg,
        rgba(59, 139, 255, 0) 0%,
        rgba(109, 191, 255, 0.2) 100%
      );
    }
    .arr-content {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;

      li,
      .el-row {
        width: 100%;
        list-style: none;
        color: #fff;
        text-align: left;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .sinSpan {
          cursor: pointer !important;
          display: inline-block;
          width: 32%;
          padding: 13px 5px 10px;
          text-align: left;
          cursor: default;
          color: #fff;
          text-align: left;
          border-bottom: 1px solid rgba(59, 139, 255, 0.4);
          margin-right: 20px;
          &:nth-of-type(3n) {
            margin-right: 0;
          }
        }
        .conSpan {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }

      i.circle {
        margin-right: 0.9375rem;
      }
    }
  }
}
i {
  font-style: normal;
}
i.circle {
  position: relative;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 5px;
  border-radius: 50%;
  &::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
  }
  &.normal {
    border: 1px solid #38c082;
    &::before {
      background: #02d474;
    }
  }
  &.risk {
    border: 1px solid #facc29;
    &::before {
      background: #facc29;
    }
  }
  &.danger {
    border: 1px solid #ff3535;
    &::before {
      background: #ff3535;
    }
  }
}
.normal {
  color: #3b8bff;
}
.risk {
  color: #00e1e4;
}
.serious {
  color: #facc29;
}
.danger {
  color: #ff3535;
}
::v-deep {
  .el-collapse {
    border-top: none;
    border-bottom: none;
    color: #fff;
    .el-collapse-item__header {
      padding-left: 30px;
      line-height: 40px;
      height: 40px;
      font-size: 0.875rem;
      background: transparent;
      background-image: linear-gradient(
        270deg,
        rgba(59, 139, 255, 0) 0%,
        rgba(59, 139, 255, 0.2) 100%
      );
      color: #fff;

      border-bottom-color: #3b8bff;
      position: relative;
    }
    .el-collapse-item__wrap {
      background: transparent;
      border-bottom: none;
    }
    .el-collapse-item__arrow {
      left: 10px;
      top: 15px;
      position: absolute;
    }
  }

  .el-collapse-item__content {
    font-size: 1rem;
    padding-bottom: 0;
  }
}
</style>
